<%@page import="com.google.gson.Gson"%>
<%@page import="cz.acies.genea.data.dao.*"%>
<%@page import="cz.acies.genea.data.persist.*"%>
<%@page import="cz.acies.genea.ui.chart.*"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
String theme = "metro";

//TreeChart inst = new TreeChart();
//String html = inst.build();
//System.out.println(html);

GedFamilyDAO fDao = new GedFamilyDAO();

GedFamily root = fDao.selectById("GE.F.POYD96Q28745JMK"); 		// HOME - Burian Josef
//GedFamily root = fDao.selectById("GE.F.P35X6LIRJY15WJB"); 		// HOME - Dytrych Zdeněk
//GedFamily root = fDao.selectById("GE.F.DG6BV9NJJXLESKN"); 		// HOME
//GedFamily root = fDao.selectById("GE.F.KUGK7AAMBXTQFBI"); 		// WORK
//GedFamily root = fDao.selectById("GE.F.3VJ4GAOR7ZGFT59"); 		// WORK - Dytrych Zdeněk
//GedFamily root = fDao.selectById("GE.F.GA5SVRWWRXXPDZA"); 		// WORK - Burian Josef

//System.out.println(root);
GedPerson selected = root.getMan();

TreeChart inst = new TreeChart();
inst.setRoot(root);
inst.setSelected(selected);
inst.createModel();
String treeData = "[]";
treeData = new Gson().toJson(inst.getModel().toJson()); 

List<Object> drawData = inst.rendered(); 
/*
TreeChartCard card = new TreeChartCard(inst.getSelected());
List<Object> drawData = card.rendered();
*/
/*
TreeChartFamilyNode node = new TreeChartFamilyNode(inst.getRoot());
List<Object> drawData = node.rendered();
System.out.println("ftt003.drawData: "+drawData);
*/
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title></title>

<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=9" />

<link rel="stylesheet" type="text/css" href="<%=path%>/libs/themes/<%=theme%>/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/libs/themes/icon.css">

<style type="text/css">
	#familyTree {
		width: 1000px;
		height: 500px;
		border: 1px solid #ccc;
		margin: 0px;
	}
</style>

<script src="<%=path%>/libs/jquery-1.9.1.js"></script>
<script src="<%=path%>/libs/raphael.js"></script>
<script type="text/javascript" src="<%=path%>/libs/jquery.easyui.min.js"></script>

<script>
var drawData = <%=drawData%>;

$(document).ready(function() {
	
	paper = Raphael("familyTree");
	paper.setSize(5000, 5000);
	//rect = {"type":"rect","stroke":"#000000","fill":"#ffffff","lineWidth":1,"opacity":1.0,"x":100.0,"y":100.0,"width":200.0,"height":75.0};
	paper.add(drawData);
	
	//line = {"type":"path","stroke":"#000000","fill":"#ffffff","lineWidth":1,"opacity":1.0,"path":"M50.0,200.0L300.0,300.0"};
	//var cell = paper.add([rect, line]);
	//var gd = [{"type":"rect","stroke":"#000000","fill":"#ffffff","lineWidth":1,"opacity":1.0,"x":0.0,"y":0.0,"width":200.0,"height":75.0}, {"type":"text","stroke":"#000000","fill":"#ffffff","lineWidth":1,"opacity":1.0,"text":"text","x":50.0,"y":10.0,"font-family":"Arial, Helvetica, sans-serif","font-size":15}];
	//paper.add([rect]);
});
</script>

</head>

<body>
	<div id="folderTreeContainer" style="height: 100px; overflow: auto; border: 1px solid #ccc; margin-bottom: 10px;">
	<ul id="folderTree" class="easyui-tree"></ul> 
	<script type="text/javascript"> 
		$("#folderTree").tree({ 
			data: <%= treeData %>,  
		}); 
	</script> 
	</div>
	<div id="familyTree" style="height: 750px; width: 1150px; overflow: auto;">
	</div>
</body>
</html>
